import React, { useState } from 'react';
import { Modal, Button, Checkbox, Form } from 'antd';
import './turn.less'
function Turn() {
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    function onChange(e) {
        console.log(`checked = ${e.target.checked}`);
    };

    return (
        <span>
            <span onClick={showModal}>请选择</span>
            <Modal
                id='zmodal'
                title="转收人"
                visible={isModalVisible}
                onCancel={handleCancel}
                footer={[
                    <Button onClick={handleOk} id='zbtn1'>确认</Button>,
                    <Button onClick={handleCancel} id='zbtn2'>取消</Button>
                ]}>
                <Form>
                    <Form.Item>
                        <Checkbox onChange={onChange}>
                            <div>
                                <p>
                                    <span>徐晓静</span>
                                    <span>助医、清洁、按摩</span>
                                </p>
                                <p>
                                    <span>空闲</span>
                                </p>
                            </div>
                        </Checkbox>
                    </Form.Item>
                    <Form.Item>
                        <Checkbox onChange={onChange}>
                            <div>
                                <p>
                                    <span>徐晓静</span>
                                    <span>助医、清洁、按摩</span>
                                </p>
                                <p>
                                    <span>空闲</span>
                                </p>
                            </div>
                        </Checkbox>
                    </Form.Item>
                    <Form.Item>
                        <Checkbox onChange={onChange}>
                            <div>
                                <p>
                                    <span>徐晓静</span>
                                    <span>助医、清洁、按摩</span>
                                </p>
                                <p>
                                    <span>空闲</span>
                                </p>
                            </div>
                        </Checkbox>
                    </Form.Item>
                    <Form.Item>
                        <Checkbox onChange={onChange}>
                            <div>
                                <p>
                                    <span>徐晓静</span>
                                    <span>助医、清洁、按摩</span>
                                </p>
                                <p>
                                    <span>空闲</span>
                                </p>
                            </div>
                        </Checkbox>
                    </Form.Item>

                </Form>


            </Modal>
        </span>
    )
}
export default Turn